<template>
    <el-row>
        <el-col :span="24">
            <div class="grid-content">
                
                    <img src="../assets/logo12.svg"  alt="">
                    <div class="logoText">
                       <span>链客云（Link）</span>
                       <span>www.martechlinks.com</span>
                    </div>
                     <a class='setting' @click='openDialog' href="javascript:;"></a>
                    <el-dialog title="设置" :visible.sync="dialogVisible">
                        <el-tabs :tab-position="tabPosition" style="height: 300px;">
                            <el-tab-pane label="通知">
                                    <el-form>
                                        <el-form-item label='是否开启浏览器通知' class='item'>
                                              <el-radio v-model="delivery" @change='changeSwitch' :label='item.label' v-for='(item,index) in Switch' :key='index'>
                                                  {{item.name}}
                                              </el-radio>
                                        </el-form-item>
                                         <el-form-item label='是否开启工作台自带的通知' class='item'>
                                                <el-radio v-model="Workbench" @change='changeWorkbench' :label='item.label' v-for='(item,index) in Switch' :key='index'>
                                                    {{item.name}}
                                                </el-radio> 
                                         </el-form-item>
                                    </el-form>
                            </el-tab-pane>
                            <el-tab-pane label="声音开关">
                                <el-form>
                                        <el-form-item label='是否开启收到信息的音乐' class='item'>
                                                <el-radio v-model="receiving" @change='changeMusicReceiving' :label='item.label' v-for='(item,index) in Switch' :key='index'>
                                                    {{item.name}}
                                                </el-radio>
                                        </el-form-item>
                                       
                                </el-form>
                            </el-tab-pane>
                             <el-tab-pane label="机器人辅助人工客服">
                                <el-form>
                                        <el-form-item label='是否开启机器人辅助人工客服' class='item'>
                                                <el-radio v-model="auxiliary" @change='changeAuxiliary' :label='item.label' v-for='(item,index) in Switch' :key='index'>
                                                    {{item.name}}
                                                </el-radio>
                                        </el-form-item>
                                       
                                </el-form>
                            </el-tab-pane>
                           
                        </el-tabs>
                    </el-dialog>
            </div>
        </el-col>
    </el-row>
</template>

<script>
export default {
  name: "headerNav",
  data() {
    return {
      dialogVisible: false,
      tabPosition: "left",
      delivery: "1",
      Workbench: "1",
      receiving: "1",
      auxiliary:"1",
      Switch: [
        {
          name: "是",
          label: "1"
        },
        {
          name: "否",
          label: "2"
        }
      ]
    };
  },
  methods: {
    openDialog() {
      this.dialogVisible = !this.dialogVisible;
    },
    //是否开启浏览器通知
    changeSwitch(value) {
      console.log(value);
      localStorage.setItem("delivery", value);
      // this.delivery = value;
    },
    //是否开启工作台自带的通知
    changeWorkbench(value) {
      localStorage.setItem("Workbench", value);
    },
    //是否开启收到信息的音乐
    changeMusicReceiving(value) {
      localStorage.setItem("receiving", value);
    },

    //是否开启机器人辅助人工智能
    changeAuxiliary(value){
       localStorage.setItem("auxiliary", value); 
    },

    //默认开启浏览器通知，开启工作台自带的通知，开启收到信息的音乐,开启机器人辅助人工智能
    defaultOpen() {
      localStorage.setItem("delivery", this.delivery);
      localStorage.setItem("Workbench", this.Workbench);
      localStorage.setItem("receiving", this.receiving);
      localStorage.setItem("auxiliary", this.auxiliary); 
    }
  },
  mounted() {
    this.defaultOpen();

    if (localStorage.getItem("delivery")) {
      this.delivery = localStorage.getItem("delivery");
    } else {
      this.delivery = this.delivery;
    }

    if (localStorage.getItem("Workbench")) {
      this.Workbench = localStorage.getItem("Workbench");
    } else {
      this.Workbench = this.Workbench;
    }
    if (localStorage.getItem("receiving")) {
      this.receiving = localStorage.getItem("receiving");
    } else {
      this.receiving = this.receiving;
    }

     if (localStorage.getItem("auxiliary")) {
      this.auxiliary = localStorage.getItem("auxiliary");
    } else {
      this.auxiliary = this.auxiliary;
    }
  }
};
</script>

<style scoped>
.grid-content {
  width: 100%;
  padding-left: 2rem;
  flex-wrap: wrap;
  flex-direction: row;
  box-sizing: content-box;
}
.grid-content span {
  color: #fff;
  font-weight: 300;
  letter-spacing: 0.02rem;
}

.item {
  padding-left: 2rem;
}

img {
  float: left;
  width: 4rem;
}

.setting {
  display: block;
  width: 1rem;
  height: 4rem;
  background: url("../assets/LinkageSetting.png") center center no-repeat;
  background-size: 1rem;
  float: right;
  margin-right: 4rem;
}

.logoText {
  margin: 0.8rem 0 0 1rem;
  float: left;
  display: flex;
  flex-wrap: wrap;
}

.logoText span {
  width: 100%;
}
</style>